<div class="reverseRotate">
  <div class="rotate">
    <div class="content">正负旋转3d动画</div>
  </div>
</div>

<style>
  .reverseRotate {
    margin: 20vh auto;
  }

  .rotate,
  .reverseRotate {
    width: 50vh;
    height: 50vh;
  }

  .content {
    width: 100%;
    height: 100%;
    line-height: 50vh;
    text-align: center;
    background-color: rgba(255, 100, 100, .8);
    font-size: 5vh;
    color: #fff;
    box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
  }

  .rotate {
    animation: rotate 5s linear infinite;
  }

  .reverseRotate {
    animation: reverseRotate 5s linear infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes reverseRotate {
    100% {
      transform: rotate(-360deg);
    }
  }
</style>